<template>
	<view class="poRel">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="订单列表" @topTotalHeight="topTotalHeight"
		></navbar>
		<scroll-view scroll-x="true" class="whSpaNow backColWhite lh88r f28r borB1SE6e6e6">
			<view @click="cliOrderBtn(index)" v-for="(item, index) in orderAry" :key="index"
				:class="['mr13r', 'ml13r', 'disInBlo', 'poRel', 'pl15r', 'pr15r',
					orderIdx == index ? 'foWeiBold col99c043' : ''
				]"
			>
				{{item}}
				<text class="w50r h4r backCol99c043 poAbs bom0 left50P trTrXn50P"
					v-show="orderIdx == index"
				></text>
			</view>
		</scroll-view>
		<swiper @change="swiperChaFun" :current="orderIdx"
			:style="'height: ' + 'calc(100vh - ' + calcNum + 'px);'"
		>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri0"
				>
					<orderList :detailedList="detailedList0" :noMore="noMore0"
						@refreshList="refreshList"
					></orderList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri1"
				>
					<orderList :detailedList="detailedList1" :noMore="noMore1"
						@refreshList="refreshList"
					></orderList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri2"
				>
					<orderList :detailedList="detailedList2" :noMore="noMore2"
						@refreshList="refreshList"
					></orderList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri3"
				>
					<orderList :detailedList="detailedList3" :noMore="noMore3"
						@refreshList="refreshList"
					></orderList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri4"
				>
					<orderList :detailedList="detailedList4" :noMore="noMore4"
						@refreshList="refreshList"
					></orderList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri5"
				>
					<orderList :detailedList="detailedList5" :noMore="noMore5"
						@refreshList="refreshList"
					></orderList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri6"
				>
					<orderList :detailedList="detailedList6" :noMore="noMore6"
						@refreshList="refreshList"
					></orderList>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="f24r poFixed rig20r w100r backColWhite bSha0010u0rgb00001 bom200r pt50r pb50r borRad50r">
			<view class="w100r h100r teAliCenter" @click="cliRenewalGreen">
				<image :src="baseUrl + 'iconRenewalGreen.png'" mode="aspectFit"
					class="w50r h50r mt5r"
				></image>
				<view class="">
					再续单
				</view>
			</view>
			<view class="w100r h100r teAliCenter" @click="cliDoorGreen">
				<image :src="baseUrl + 'iconDoorGreen.png'" mode="aspectFit"
					class="w50r h50r mt5r"
				></image>
				<view class="">
					开门码
				</view>
			</view>
		</view>
		<view class="poAbs wPer100 left0 zIndex1 backColrgba255a255a255a0s9"
			v-if="!token"
			:style="'height: ' + 'calc(100vh - ' + (calcNum - 45) + 'px);top: ' + (calcNum - 45) + 'px;'"
		>
			<navigator class="w300r teAliCenter f28r backImgLiGrTR2c6739a99c043 lh80r colFff borRad40r poAbs top50P left50P trTrn50Pn50P"
				url="/pages/personalCenter/login?type=2"
			>
				立即登录
			</navigator>
		</view>
		<haveInHandList @cliClose="cliClose" :departureType="departureType"
			:departureFrame="departureFrame" :departureList="departureList"
			@refreshList="refreshList" @openShareFrame="openShareFrame" ref="haveInHandList"
		></haveInHandList>
		<shareFrame @cliCloseShare="cliCloseShare" :showShareFrame="showShareFrame"
			:shareCode="shareCode" :shareType="shareType"
		></shareFrame>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import orderList from '@/components/orderList.vue'
import { getMemberOrderList,
	getSwitchCode } from "@/utils/api.js"
import { baseUrl } from '@/utils/request.js'
import haveInHandList from '@/components/haveInHandList.vue'
import shareFrame from '@/components/shareFrame.vue'
export default {
	components: { navbar, orderList, haveInHandList, shareFrame },
	data() {
		return {
			token: '',
			calcNum: 0,
			baseUrl,
			orderAry: [
				'全部', '待付款', '待使用', '使用中', '已完成', '已取消', '已退款'
			],
			orderIdx: 0,
			ordertri0: false, detailedList0: [], noMore0: false, page0: 0,
			ordertri1: false, detailedList1: [], noMore1: false, page1: 0,
			ordertri2: false, detailedList2: [], noMore2: false, page2: 0,
			ordertri3: false, detailedList3: [], noMore3: false, page3: 0,
			ordertri4: false, detailedList4: [], noMore4: false, page4: 0,
			ordertri5: false, detailedList5: [], noMore5: false, page5: 0,
			ordertri6: false, detailedList6: [], noMore6: false, page6: 0,
			departureType: 1, departureFrame: false, departureList: [],
			shareCode: '', showShareFrame: false, shareType: 1
		}
	},
	onLoad() {
		
	},
	onShow() {
		// #ifdef MP-WEIXIN
			const token = uni.getStorageSync('token');
		// #endif
		// #ifdef H5
			const token = '2eae0f660b498bdc724dee1efa63407e';
			uni.setStorage({
				key: 'token', data: token
			})
		// #endif
		if(token) {
			this.token = token;
			this.getDataList1(0, '', '');
			this.getDataList1(0, 1, '');
			this.getDataList1(0, 2, 1);
			this.getDataList1(0, '', 2);
			this.getDataList1(0, 2, 3);
			this.getDataList1(0, '', 4);
			this.getDataList1(0, 3, '');
		}else {
			this.token = '';
			this.noMore0 = false;
			this.page0 = 0;
			this.detailedList0 = [];
			this.noMore1 = false;
			this.page1 = 0;
			this.detailedList1 = [];
			this.noMore2 = false;
			this.page2 = 0;
			this.detailedList2 = [];
			this.noMore3 = false;
			this.page3 = 0;
			this.detailedList3 = [];
			this.noMore4 = false;
			this.page4 = 0;
			this.detailedList4 = [];
			this.noMore5 = false;
			this.page5 = 0;
			this.detailedList5 = [];
			this.noMore6 = false;
			this.page6 = 0;
			this.detailedList6 = [];
		}
	},
	onShareAppMessage(res) {
		let title = '山雀壹®共享茶室',
			imageUrl = '/static/images/logo.png',
			mpId = 'wxf8003ea15566ecd1';
	    if (res.from === 'button') {
			return {
				title, imageUrl, mpId,
				path: '/pages/index/index?shareCode=' + this.shareCode
			}
	    }else {
			return {
			    title, imageUrl, mpId,
			    path: '/pages/order/index',
			}
		}
	},
	onShareTimeline(res) {
	    return {
	        title: '山雀壹®共享茶室',
	        type: 0,
	        summary: "",
	    }
	},
	methods: {
		topTotalHeight(height) {
			// #ifdef MP-WEIXIN
				this.calcNum = height + 45;
			// #endif
			// #ifdef H5
				this.calcNum = 45 + 50;
			// #endif
		},
		getDataList1(page, type, make_status, callBack) {
			uni.showLoading({ title: '加载中...' })
			getMemberOrderList({
				token: this.token, number: 10,
				page, type, make_status
			}).then(res => {
				if(type == '' && make_status == '') {
					if(page > 0) {
						this.detailedList0 = this.detailedList0.concat(res.data.data);
					}else {
						this.detailedList0 = res.data.data;
					}
					if(res.data.number < 10) this.noMore0 = true;
				}
				if(type == 1 && make_status == '') {
					if(page > 0) {
						this.detailedList1 = this.detailedList1.concat(res.data.data);
					}else {
						this.detailedList1 = res.data.data;
					}
					if(res.data.number < 10) this.noMore1 = true;
				}
				if(type == 2 && make_status == 1) {
					if(page > 0) {
						this.detailedList2 = this.detailedList2.concat(res.data.data);
					}else {
						this.detailedList2 = res.data.data;
					}
					if(res.data.number < 10) this.noMore2 = true;
				}
				if(type == '' && make_status == 2) {
					if(page > 0) {
						this.detailedList3 = this.detailedList3.concat(res.data.data);
					}else {
						this.detailedList3 = res.data.data;
					}
					if(res.data.number < 10) this.noMore3 = true;
				}
				if(type == 2 && make_status == 3) {
					if(page > 0) {
						this.detailedList4 = this.detailedList4.concat(res.data.data);
					}else {
						this.detailedList4 = res.data.data;
					}
					if(res.data.number < 10) this.noMore4 = true;
				}
				if(type == '' && make_status == 4) {
					if(page > 0) {
						this.detailedList5 = this.detailedList5.concat(res.data.data);
					}else {
						this.detailedList5 = res.data.data;
					}
					if(res.data.number < 10) this.noMore5 = true;
				}
				if(type == 3 && make_status == '') {
					if(page > 0) {
						this.detailedList6 = this.detailedList6.concat(res.data.data);
					}else {
						this.detailedList6 = res.data.data;
					}
					if(res.data.number < 10) this.noMore6 = true;
				}
				uni.hideLoading();
				if(callBack) callBack();
			})
		},
		cliOrderBtn(type) {
			if(this.orderIdx != type) {
				this.orderIdx = type;
			}
		},
		swiperChaFun(eee) {
			if (eee.detail.source == 'touch') {
				this.orderIdx = eee.detail.current;
			}
		},
		orderScroll() {
			if(this.orderIdx == 0) {
				if(this.noMore0) return;
				this.page0 += 1;
				this.getDataList1(this.page0, '', '');
			}else if(this.orderIdx == 1) {
				if(!this.noMore1) {
					this.page1 += 1;
					this.getDataList1(this.page1, 1, '');
				}
			}else if(this.orderIdx == 2) {
				if(!this.noMore2) {
					this.page2 += 1;
					this.getDataList1(this.page2, 2, 1);
				}
			}else if(this.orderIdx == 3) {
				if(!this.noMore3) {
					this.page3 += 1;
					this.getDataList1(this.page3, '', 2);
				}
			}else if(this.orderIdx == 4) {
				if(!this.noMore4) {
					this.page4 += 1;
					this.getDataList1(this.page4, 2, 3);
				}
			}else if(this.orderIdx == 5) {
				if(!this.noMore5) {
					this.page5 += 1;
					this.getDataList1(this.page5, '', 4);
				}
			}else if(this.orderIdx == 6) {
				if(!this.noMore6) {
					this.page6 += 1;
					this.getDataList1(this.page6, 3, '');
				}
			}
		},
		orderRefresh() {
			if(this.orderIdx == 0) {
				if(this.ordertri0) {
					return;
				}else {
					this.ordertri0 = true;
					this.noMore0 = false;
					this.page0 = 0;
					this.getDataList1(0, '', '', () => {
						this.ordertri0 = false;
					})
				}
			}else if(this.orderIdx == 1) {
				if(!this.ordertri1) {
					this.ordertri1 = true;
					this.noMore1 = false;
					this.page1 = 0;
					this.getDataList1(0, 1, '', () => {
						this.ordertri1 = false;
					})
				}
			}else if(this.orderIdx == 2) {
				if(!this.ordertri2) {
					this.ordertri2 = true;
					this.noMore2 = false;
					this.page2 = 0;
					this.getDataList1(0, 2, 1, () => {
						this.ordertri2 = false;
					})
				}
			}else if(this.orderIdx == 3) {
				if(!this.ordertri3) {
					this.ordertri3 = true;
					this.noMore3 = false;
					this.page3 = 0;
					this.getDataList1(0, '', 2, () => {
						this.ordertri3 = false;
					})
				}
			}else if(this.orderIdx == 4) {
				if(!this.ordertri4) {
					this.ordertri4 = true;
					this.noMore4 = false;
					this.page4 = 0;
					this.getDataList1(0, 2, 3, () => {
						this.ordertri4 = false;
					})
				}
			}else if(this.orderIdx == 5) {
				if(!this.ordertri5) {
					this.ordertri5 = true;
					this.noMore5 = false;
					this.page5 = 0;
					this.getDataList1(0, '', 4, () => {
						this.ordertri5 = false;
					})
				}
			}else if(this.orderIdx == 6) {
				if(!this.ordertri6) {
					this.ordertri6 = true;
					this.noMore6 = false;
					this.page6 = 0;
					this.getDataList1(0, 3, '', () => {
						this.ordertri6 = false;
					})
				}
			}
		},
		cliRenewalGreen() {
			this.departureType = 1;
			this.getIngOrder(1);
		},
		cliDoorGreen() {
			this.departureType = 2;
			this.getIngOrder(2);
		},
		getIngOrder(type) {
			if(this.token) {
				this.$refs['haveInHandList'].getDataList0();
				this.departureFrame = true;
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		cliClose() {
			this.departureFrame = false;
		},
		openShareFrame(id) {
			getSwitchCode({
				token: this.token, id
			}).then(res2 => {
				console.log('end_time', res2.data)
				this.shareCode = res2.data;
				this.shareType = 1;
				this.showShareFrame = true;
			})
		},
		cliCloseShare() {
			this.showShareFrame = false;
		},
		refreshList() {
			this.noMore0 = false;
			this.page0 = 0;
			this.getDataList1(0, '', '');
			this.noMore1 = false;
			this.page1 = 0;
			this.getDataList1(0, 1, '');
			this.noMore2 = false;
			this.page2 = 0;
			this.getDataList1(0, 2, 1);
			this.noMore3 = false;
			this.page3 = 0;
			this.getDataList1(0, '', 2);
			this.noMore4 = false;
			this.page4 = 0;
			this.getDataList1(0, 2, 3);
			this.noMore5 = false;
			this.page5 = 0;
			this.getDataList1(0, '', 4);
			this.noMore6 = false;
			this.page6 = 0;
			this.getDataList1(0, 3, '');
		}
	}
}
</script>
<style>
</style>